import React, { memo, useState} from 'react'

import { shallowEqual, useSelector } from 'react-redux'
import {
  InfoWrapper,
  LyricWrapper
} from './style'

import OperationBar from '@/components/operation-bar'

export default memo(function SongInfo() {
  const [isShow, setIsShow] = useState(false);
  const { currentSongDetail ,songLyric,totalComment} = useSelector(state => ({
    currentSongDetail: state.getIn(['song', 'currentSongDetail']),
    songLyric: state.getIn(['song', 'songLyric']),
    totalComment: state.getIn(['song', 'totalComment'])
  }), shallowEqual)
  const changeShow = () => {
    setIsShow(!isShow)
  }
  const songInfo = currentSongDetail || {}
    return (
      <InfoWrapper>
        <div className='sprite_covor cover'>
          {
            songInfo.al?<img src={songInfo.al.picUrl} alt="" />:null
          }
        </div>
        <div className="right">
          <div className="name">
            <i className='sprite_icon2 icon'></i>
            <span className='song_name'>{songInfo.name}</span>
          </div>
          <div className="artist">歌手:<a href='hhe' className='artist_name'>{songInfo.ar? songInfo.ar[0].name:null }</a></div>
          <div className="album">所属专辑:<a href='heh' className='album_name'>{ songInfo.al?songInfo.al.name:null }</a></div>
          <OperationBar favorCount="收藏"
            shareCount="分享"
            downloadCount="下载"
            commentCount={totalComment}
          />
          <LyricWrapper isShow={isShow}>
            {
              songLyric.map(item => {
                return (
                  <div className="item" key={item.id}>
                    {item.content}
                  </div>
                )
              })
            }
          </LyricWrapper>
          <div className="show" onClick={e => changeShow()}>{isShow ? '收起' : '展开'}</div>
        </div>
    </InfoWrapper>
    )
  
})
